<template>
    <div style="height:2000px" class="main" v-if="nodes.indexOf('3')!=-1" >
      <!-- 时间选择 -->
      <!-- <div class="datetype">
          <div class="dated">
              <el-tabs type="border-card"  v-model="thisQuery.tabPosition" @tab-click="handleClickAll">
                <el-tab-pane label="全部" name="1"></el-tab-pane>
                <el-tab-pane label="本周"  name="2"></el-tab-pane>
                <el-tab-pane label="本月"  name="3"></el-tab-pane>
                <el-tab-pane label="本季度"  name="4"></el-tab-pane>
                <el-tab-pane label="全年"  name="5"></el-tab-pane>
              </el-tabs>
          </div>
          
          <div class="block" style="width:350px;float:left">
            <el-date-picker
              v-model="thisQuery.defaultDate"
              @change="handleClickAll"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
          
      </div> -->
      <!-- 曲线图 -->
      <!-- <div class="one_line_box">
        <div class="title">应收款</div>
        <div class="allmoney">￥{{one.allmoney}}</div>
        <div id="chartLineOne" class="one_line"></div>
        <hr class="hr"/>
        <div class="datas">
          <el-row>
            <el-col :span="8" style="text-align:left"><span class="labels">未还金额：</span><span  class="jenos">{{one.no_paid_money}}</span></el-col>
            <el-col :span="8" style="text-align:center"><span class="labels">已还金额：</span><span  class="jenos">{{one.paid_money}}</span></el-col>
            <el-col :span="8" style="text-align:right"><span class="labels">逾期率：</span><span  class="jenos">{{one.yql}}%</span></el-col>
          </el-row>
        </div>
      </div> -->
      
      <!-- <div id="chartLine" class="one_line"></div> -->
      <!-- 柱状图 -->
      <!-- <div id="Columnar" class="line-columnar"></div> -->
      <!-- <div class="one_line_box">
        <div class="title">应付款</div>
        <div class="allmoney">￥{{two.allmoney}}</div>
        <div id="Columnar" class="line-columnar"></div>
        <hr class="hr"/>
        <div class="datas">
          <el-row>
            <el-col :span="6" style="text-align:left"><span class="labels">首打款应付：</span><span  class="jenos">{{two.first_should}}</span></el-col>
            <el-col :span="6" style="text-align:center"><span class="labels">首打款实付：</span><span  class="jenos">{{two.first_paid}}</span></el-col>
            <el-col :span="6" style="text-align:right"><span class="labels">分期应付：</span><span  class="jenos">{{two.fen_should}}</span></el-col>
            <el-col :span="6" style="text-align:right"><span class="labels">分期实付</span><span  class="jenos">{{two.fen_paid}}</span></el-col>
          </el-row>
        </div>
      </div>
      <div class="clear"></div> -->
      <!-- 折线图 -->
      <!-- <div class="two_line_box">
        <div id="two_line" class="two_line"></div>
      </div> -->
      <!-- 饼状图 城市统计-->
      <div class="one_pie_box">
        <div class="title2">各城市数据统计</div>
         <div class="datas2">
          <el-row>
            <el-col :span="8" style="text-align:center;border-right:1px solid #e8e8e8"><span class="labels">总债权</span><br/>
              <span  class="jenos2"><input :value="four.all_creditor"/></span>
            </el-col>
            <el-col :span="8" style="text-align:center;border-right:1px solid #e8e8e8"><span class="labels">总订单数</span><br/>
              <span  class="jenos2"><input :value="four.all_order"/></span></el-col>
            <!-- <el-col :span="6" style="text-align:center;border-right:1px solid #e8e8e8"><span class="labels">总利息</span><br/>
              <span  class="jenos2"><input :value="four.all_rate"/></span>
            </el-col> -->
            <el-col :span="8" style="text-align:center"><span class="labels">总服务费</span><br/>
              <span  class="jenos2"><input :value="four.all_server"/></span>
            </el-col>
          </el-row>
        </div>
        <hr class="hr"/>
        <div id="chartPieCity" class="pie-wrap"></div>
      </div>
      <div class="one_pie_box">
        <div class="title2">各城市排名统计</div>
        <!-- <div>
          <el-select v-model="rankingdata.city" placeholder="选择城市" filterable class="filter-item" style="width:130px;margin-top:8px" @change="getRegionList">
            <el-option label="请选择城市"  value="" />
            <el-option
              v-for="item in city"
              :key="item.city"
              :label="item.name"
              :value="item.city"
            />
          </el-select>
        </div> -->
        <el-tabs v-model="CityRankingData.label"  style="margin-top:15pt;margin-left:5%;margin-right:5%"  @tab-click="cityRank">
          <el-tab-pane label="总债权" name="1"></el-tab-pane>
          <el-tab-pane label="总订单数" name="2"></el-tab-pane>
          <el-tab-pane label="总利息" name="3"></el-tab-pane>
          <el-tab-pane label="总服务费" name="4"></el-tab-pane>
        </el-tabs>
        <div class="rank">
          <div class="gd">
             <el-tabs v-model="CityRankingData.type"  @tab-click="cityRank">
              <el-tab-pane label="今日" name="2"></el-tab-pane>
              <el-tab-pane label="本周" name="3"></el-tab-pane>
              <el-tab-pane label="本月" name="4"></el-tab-pane>
              <el-tab-pane label="本季度" name="5"></el-tab-pane>
              <el-tab-pane label="全年" name="5"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="defualt">
            <el-date-picker
              @change="cityRank"
              v-model="CityRankingData.defaultDate"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </div>
        </div>
        <div class="list_box">
          <div class="lis" v-for="(item,index) in CityRankingData.list">
            <el-row style="height:100%">
              <el-col :span="2" >
                <div  class="num " v-bind:class="[{'firstt':index==0},{'second':index==1},{'third':index==2}]" >{{index+1}}</div>
              </el-col>
              <el-col :span="17">{{item.city_name}}</el-col>
              <el-col :span="5" style="text-align:right">{{item.number}}</el-col>
            </el-row>
          </div>
        </div>
      </div>
      <!-- 饼状图 商户统计-->
      <div class="one_pie_box">
        <div class="title2">商户统计</div>
         <div class="datas2">
          <el-row>
            <el-col :span="8" style="text-align:center;border-right:1px solid #e8e8e8"><span class="labels">商户总数</span><br/>
              <span  class="jenos2"><input value="1256"/></span>
            </el-col>
            <el-col :span="8" style="text-align:center;border-right:1px solid #e8e8e8"><span class="labels">新增</span><br/>
              <span  class="jenos2"><input :value="five.new"/></span>
            </el-col>
            <el-col :span="8" style="text-align:center"><span class="labels">待审核</span><br/>
              <span  class="jenos2"><input :value="five.no_check"/></span>
            </el-col>
          </el-row>
        </div>
        <hr class="hr"/>
        <div id="chartPieMerchant" class="pie-wrap"></div>
      </div>
      <div class="one_pie_box">
        <div class="title2">各商户排名统计</div>
        <!-- <div>
          <el-select v-model="rankingdata.city" placeholder="选择城市" filterable class="filter-item" style="width:130px;margin-top:8px" @change="getRegionList">
            <el-option label="请选择城市"  value="" />
            <el-option
              v-for="item in city"
              :key="item.city"
              :label="item.name"
              :value="item.city"
            />
          </el-select>
        </div> -->
        <el-tabs v-model="MerchantRankingData.label"  style="margin-top:15pt;margin-left:5%;margin-right:5%" @tab-click="merchantRank">
          <el-tab-pane label="初审数" name="7"></el-tab-pane>
          <el-tab-pane label="进件数" name="8"></el-tab-pane>
          <el-tab-pane label="签约数" name="1"></el-tab-pane>
          <!-- <el-tab-pane label="逾期数" name="2"></el-tab-pane> -->
          <el-tab-pane label="结清数" name="3"></el-tab-pane>
          <el-tab-pane label="总债权" name="4"></el-tab-pane>
          <el-tab-pane label="应收总利息" name="5"></el-tab-pane>
          <el-tab-pane label="总服务费" name="6"></el-tab-pane>
        </el-tabs>
        <div class="rank">
          <div class="gd">
             <el-tabs v-model="MerchantRankingData.type"  @tab-click="merchantRank">
              <el-tab-pane label="今日" name="2"></el-tab-pane>
              <el-tab-pane label="本周" name="3"></el-tab-pane>
              <el-tab-pane label="本月" name="4"></el-tab-pane>
              <el-tab-pane label="本季度" name="5"></el-tab-pane>
              <el-tab-pane label="全年" name="5"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="defualt">
            <el-date-picker
              @change="merchantRank"
              v-model="MerchantRankingData.defaultDate"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </div>
        </div>
        <div class="list_box">
          <div class="lis" v-for="(item,index) in MerchantRankingData.list">
            <el-row style="height:100%">
              <el-col :span="2" >
                <div  class="num " v-bind:class="[{'firstt':index==0},{'second':index==1},{'third':index==2}]" >{{index+1}}</div>
              </el-col>
              <el-col :span="17">{{item.merchant_name}}</el-col>
              <el-col :span="5" style="text-align:right">{{item.number}}</el-col>
            </el-row>
          </div>
        </div>
      </div>
      <!-- 饼状图 销售统计-->
      <div class="one_pie_box">
        <div class="title2">销售统计</div>
         <div class="datas2">
          <el-row>
            <el-col :span="6" style="text-align:center;border-right:1px solid #e8e8e8"><span class="labels">总债权</span><br/>
              <span  class="jenos2"><input :value="four.all_creditor"/></span>
            </el-col>
            <el-col :span="6" style="text-align:center;border-right:1px solid #e8e8e8"><span class="labels">总业绩</span><br/>
              <span  class="jenos2"><input :value="four.all_project_money"/></span>
            </el-col>
            <el-col :span="6" style="text-align:center;border-right:1px solid #e8e8e8"><span class="labels">总订单数</span><br/>
              <span  class="jenos2"><input :value="four.all_order"/></span>
            </el-col>
            <el-col :span="6" style="text-align:center;border-right:1px solid #e8e8e8"><span class="labels">总利息</span><br/>
              <span  class="jenos2"><input :value="four.all_rate"/></span>
            </el-col>
          </el-row>
        </div>
        <hr class="hr"/>
        <div id="chartPieSale" class="pie-wrap"></div>
      </div>
      <div class="one_pie_box">
        <div class="title2">销售排名统计</div>
        <!-- <div>
          <el-select v-model="rankingdata.city" placeholder="选择城市" filterable class="filter-item" style="width:130px;margin-top:8px" @change="getRegionList">
            <el-option label="请选择城市"  value="" />
            <el-option
              v-for="item in city"
              :key="item.city"
              :label="item.name"
              :value="item.city"
            />
          </el-select>
        </div> -->
        <el-tabs v-model="SaleRankingData.label" style="margin-top:15pt;margin-left:5%;margin-right:5%" @tab-click="saleRank">
          <el-tab-pane label="销售总额" name="1"></el-tab-pane>
          <el-tab-pane label="初审数" name="2"></el-tab-pane>
          <el-tab-pane label="进件数" name="4"></el-tab-pane>
          <el-tab-pane label="签约数" name="3"></el-tab-pane>
          <!-- <el-tab-pane label="逾期率" name="4"></el-tab-pane> -->
        </el-tabs>
        <div class="rank">
          <div class="gd">
             <el-tabs v-model="SaleRankingData.type"   @tab-click="saleRank">
              <el-tab-pane label="今日" name="2"></el-tab-pane>
              <el-tab-pane label="本周" name="3"></el-tab-pane>
              <el-tab-pane label="本月" name="4"></el-tab-pane>
              <el-tab-pane label="本季度" name="5"></el-tab-pane>
              <el-tab-pane label="全年" name="5"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="defualt">
            <el-date-picker
              @change="saleRank"
              v-model="SaleRankingData.defaultDate"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </div>
        </div>
        <div class="list_box">
         <div class="lis" v-for="(item,index) in SaleRankingData.list">
            <el-row style="height:100%">
              <el-col :span="2" >
                <div  class="num " v-bind:class="[{'firstt':index==0},{'second':index==1},{'third':index==2}]" >{{index+1}}</div>
              </el-col>
              <el-col :span="17">{{item.sale_name}}</el-col>
              <el-col :span="5" style="text-align:right">{{item.number}}</el-col>
            </el-row>
          </div>
        </div>
      </div>
      <!-- 卡片统计 -->
      <!-- <div class="card_box"  v-bind:style="[{backgroundImage:'url('+ (card.img[index]) +')'}]" v-for="(item,index) in card.list">
         <div class="card_title">{{item.title}}</div>
         <div class="all_count"><span class="all_count_num">{{item.no+item.refuse+item.pass}}</span>个</div>
         <div class="cardlists">
            <el-row>
              <el-col :span="8"><span>{{item.foot_one}}&nbsp;</span><span  class="numm">{{item.no}}</span></el-col>
              <el-col :span="8" style="text-align:center"><span>{{item.foot_two}}&nbsp;</span><span  class="numm">{{item.refuse}}</span></el-col>
              <el-col :span="8" style="text-align:right"><span>{{item.foot_three}}&nbsp;</span><span  class="numm">{{item.pass}}</span></el-col> 
            </el-row>
         </div>
      </div> -->
      <!-- <div class="card_box"  v-bind:style="[{backgroundImage:'url('+ (this.card.img[1]) +')'}]">
         <div class="card_title">初审订单</div>
         <div class="all_count"><span class="all_count_num">88</span>个</div>
         <div class="cardlists">
            <el-row>
              <el-col :span="8"><span>待审核&nbsp;</span><span  class="numm">20</span></el-col>
              <el-col :span="8" style="text-align:center"><span>待审核&nbsp;</span><span  class="numm">20</span></el-col>
              <el-col :span="8" style="text-align:right"><span>待审核&nbsp;</span><span  class="numm">20</span></el-col> 
            </el-row>
         </div>
      </div><div class="card_box"  v-bind:style="[{backgroundImage:'url('+ (this.card.img[2]) +')'}]">
         <div class="card_title">初审订单</div>
         <div class="all_count"><span class="all_count_num">88</span>个</div>
         <div class="cardlists">
            <el-row>
              <el-col :span="8"><span>待审核&nbsp;</span><span  class="numm">20</span></el-col>
              <el-col :span="8" style="text-align:center"><span>待审核&nbsp;</span><span  class="numm">20</span></el-col>
              <el-col :span="8" style="text-align:right"><span>待审核&nbsp;</span><span  class="numm">20</span></el-col> 
            </el-row>
         </div>
      </div> -->
      
    </div>
</template>

<script>
    import {
      formatDate
    } from '@/utils/formatDate.js';
    import png1 from '@/assets/images/1.png';
    import png2 from '@/assets/images/2.png';
    import png3 from '@/assets/images/3.png';
    import png4 from '@/assets/images/4.png';
    import png5 from '@/assets/images/5.png';
    import png6 from '@/assets/images/6.png';
    import * as echarts from 'echarts';
    import {
      getNodes
    } from '@/utils'
    require('echarts/theme/macarons');//引入主题
    require('echarts/theme/shine');//引入主题
    import {
      getRegion,getMainDatas,cityRank,merchantRank,saleRank
    } from '@/api/finance'
    export default {
      data() {
        return {
          card:{
            img:[png1,png2,png3,png4,png5,png6],
            list:[]
          },
          nodes:[],
          city: [],
          activeName:'2',
          CityRankingData:{
            city:'',
            label:'1',
            type:'2',
            defaultDate:'',
            list:[]
          },
          MerchantRankingData:{
            merchant:'',
            label:'1',
            type:'2',
            defaultDate:'',
            list:[]
          },
          SaleRankingData:{
            sale:'',
            label:'1',
            type:'2',
            defaultDate:'',
            list:[]
          },
          thisQuery:{
            tabPosition: '6',
            defaultDate: '',  
          },
          chartPie: null,
          chartLine: null,
          chartColumnar: null,
          value:'',
          start:'',
          legendY:'20%',
          legendX:'15%',
          pie_color:['#1890FF', '#36CBCB', '#975FE5','#F2637B', '#FBD437', '#4ECB73','#34E7C9', '#39ACE9', '#F1B919','#EE7953', '#E872AC', '#FD948E',],
          one:{
            allmoney:'15689.5',//总金额
            no_paid_money:'1589.5',//未还
            paid_money:'15689.5',//已还
            yql:'11',//逾期率
            data_x:['周一','周二','周三','周四','周五','周六','周日'],
            data_y:[0, 0, 0, 0, 0, 0,0],
            interval:0
          },
          two:{
            allmoney:'15689.5',//总金额
            first_should:'1589.5',//首次应付
            first_paid:'15689.5',//首次已付
            fen_should:'158263',//分期应付
            fen_paid:'87961',//分期已付
            data_x:['周一','周二','周三','周四','周五','周六','周日'],
            data_y:[0, 0, 0, 0, 0, 0,0],
          },
          three:{
            interval:0,
            should_pay:[100, 100, 10, 10, 10,10, 10],
            should_get:[20, 30, 40, 50,60, 70,70],
            // labels:['本金','利息','滞纳金','毛利润'],
            
            benjin:[0, 0, 0, 0, 0, 0, 0],//本金
            late_free:[0, 0, 0, 0, 0, 0, 0],//滞纳金
            money_rate:[0, 0, 0, 0, 0, 0, 0],//利息
            profit:[0, 0, 0, 0, 0, 0, 0],//毛利润
            
          },
          four:{
            legend:['杭州', '成都', '重庆', '长沙'],
            title:'销售额',
            element:'chartPieCity',
            
            all_creditor:'0',
            all_order:'0',
            all_rate:'0',
            all_server:'0',
            all_project_money:'0',
            series_data:[
                  {value: 335, name: '杭州'},
                  {value: 310, name: '成都'},
                  {value: 234, name: '重庆'},
                  {value: 135, name: '长沙'},
                ],
          },
          five:{
            legend:['A级', 'B级', 'C级', 'D级','E级'],
            title:'商户级别',
            element:'chartPieMerchant',
            legendY:'20%',
            legendX:'15%',
            series_data:[
                  {value: 35, name: 'A级'},
                  {value: 46, name: 'B级'},
                  {value: 17, name: 'C级'},
                  {value: 12, name: 'D级'},
                  {value: 9, name: 'E级'},
                ],
            countall:0,
            new:0,
            no_check:0
          },
          six:{
            legend:['正常', '买断', '绿通'],
            title:'销售额',
            element:'chartPieSale',
            legendY:'35%',
            legendX:'8%',
            all_creditor:'0',
            all_order:'0',
            all_rate:'0',
            all_server:'0',
            series_data:[
                  {value: 0, name: '正常'},
                  {value: 0, name: '买断'},
                  {value: 0, name: '绿通'},
                ],
          },
        }
      },
      mounted() {
      this.$nextTick(() => {
          
          
          this.drawPieChart(this.four);
          this.drawPieChart(this.five);
          this.drawPieChart(this.six);
          this.drawColumnar(this.thisQuery);
        })
      },
      created(){
          this.getRegionList();
          this.getMainDatas();
          this.cityRank();
          this.merchantRank();
          this.saleRank();
          this.nodes = getNodes()
      },
      
      methods: {
        getMainDatas(){
          getMainDatas(this.thisQuery).then(res => {
            this.one = res.data.one;
            this.two = res.data.two;
            this.three = res.data.three;
            this.four = res.data.four;
            this.five = res.data.five;
            this.six = res.data.six;
            this.card.list = res.data.card_data;

            this.four.element = 'chartPieCity';
            this.four.title = '销售额';
            

            this.five.element = 'chartPieMerchant';
            this.five.title = '商户级别';

            this.six.element = 'chartPieSale';
            this.six.title = '业绩'; 
            
           
            this.drawLineOneChart();
            this.drawColumnar();
            this.drawLineTwoChart();
            this.drawPieChart(this.four);
            this.drawPieChart(this.five);
            this.drawPieChart(this.six);

          })
        },
        
        cityRank(){
          cityRank(this.CityRankingData).then(res => {
              this.CityRankingData.list = res.data.city_rank;
          })
        },
        merchantRank(){
          merchantRank(this.MerchantRankingData).then(res => {
              this.MerchantRankingData.list = res.data.merchant_rank;
          })
        },
        saleRank(){
          saleRank(this.SaleRankingData).then(res => {
              this.SaleRankingData.list = res.data.sale_rank;
          })
        },
        drawPieChart(datas) {
          let mytextStyle = {
            color: "#333",                          
            fontSize: 15, 
            lineHeight:20                           
          };
          let mylabel = {
            show: true,                 
            position: "right",          
            offset: [30, 40],             
            formatter: '{b} : {c} ({d}%)',      
            textStyle: mytextStyle
          };
          this.chartPie = echarts.init(document.getElementById(datas.element),'macarons');
          this.chartPie.setOption({
//             title: {
//               text: datas.title,
//               x: '46pt',
//               y: '20pt',
//               textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
//                 fontFamily: 'Arial, Verdana, sans...',
//                 fontSize: 18,
//                 color:'#222',
//                 fontWeight: 'normal',
//               },
//             },
            grid: [{
                left: '50',
                bottom: '10',
                top: '10',
                right: '10'
            }],
            color:this.pie_color,
            legend: {
              itemWidth:15,
              itemHeight:15,
              textStyle:mytextStyle, 
              icon: "circle",                             
              orient:"vertical",
              right:this.legendX, 
              height:"auto",
              itemGap:5, 
              // x:'right',      //可设定图例在左、右、居中
              y:'center',     //可设定图例在上、下、居中
              padding:[0,40,40,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]       
              data: datas.legend,               
            },
            itemStyle: 
            {
              emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
              normal:{
                  
              }
            },
            series: [
              {
                //name: '访问来源',
                type: 'pie',
                radius: ['0%', '50%'],
                center: ['40%', '45%'],
                data: datas.series_data,
                animationEasing: 'cubicInOut',
                animationDuration: 2600,
                label: {           
                  emphasis: mylabel,
                  position: 'inner',
                  show : false,
                },
                itemStyle: {
                  normal: {
                      borderWidth: 8,/*隔开的白色边界*/
                      borderColor: '#fff',/*border*/
                      labelLine :{show:false}
                  },
                },
              }
            ]
          });
        },
        drawLineOneChart() {
          this.chartLine = echarts.init(document.getElementById('chartLineOne'),'shine');// 基于准备好的dom，初始化echarts实例
          let option = {
              tooltip : {
                  trigger: 'axis'
              },
              // legend: {
              //     data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
              // },
              calculable : true,
              // 设置折线图的大小
              // grid:{
              //     x:20,
              //     y:5,
              //     x2:5,
              //     y2:20,
              //     borderWidth:1
              // },
              xAxis : [
                  {
                      type : 'category',
                      boundaryGap : false,
                       axisLabel: { //  如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
                        interval: 10, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
                        rotate: 0 // 横坐标上label的倾斜度
                       },
                       show:false,
                      axisTick: {
                          show: false
                      },
                      data : this.one.data_x,
                      axisLabel:{
                                  interval:this.one.interval,//每四个点显示一个标签
                               }
                  }
              ],
              yAxis : [
                  {
                      type : 'value',
                      show:false,
                       max : Math.max.apply(null,this.one.data_y),
                       min : 0,
                      axisTick: {
                          show: false
                      },
                      splitLine: { show: false }, //去除网格线
                  }
              ],
              
              series : [
                  {
                      // name:'邮件营销',
                      type:'line',
                      stack: '总量',
                      data:this.one.data_y,
                      smooth: true,
                      areaStyle: {
                      normal: {
                        // color: '#091e3b', //改变区域颜色
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0, color: '#5FC1BB' // 0% 处的颜色
                          }, {
                            offset: 0.5, color: '#ceecea' // 100% 处的颜色
                          }, {
                            offset: 1, color: '#fff' // 100% 处的颜色
                          }]
                        ),  //背景渐变色
                      }
                    },
                      itemStyle: {
                        normal: {
                          color: "#5FC1BB",
                          lineStyle: {
                            color: "#5FC1BB"
                          }
                        }
                      },
                  },
              ],
              grid:{
                     left:"5%"  ,
                     right:"5%"  
                }
          };
          // 使用刚指定的配置项和数据显示图表
          this.chartLine.resize();//直接加这句即可
          this.chartLine.setOption(option);
        },
        drawLineTwoChart() {
          this.chartLine = echarts.init(document.getElementById('two_line'),'shine');// 基于准备好的dom，初始化echarts实例
          let option = {
              tooltip : {
                  trigger: 'axis',
                  backgroundColor:"#fff", 
                  borderColor:"#eee",
                  borderWidth:1,
                  textStyle:'color:#eee;font-size:12px;',
                  extraCssText: "width:120px;",
                  padding:[20,150,20,20], 
              },
              legend: {
                  data:['应收金额','应付金额']
              },
              color: ['#1890FF', '#2FC25B','#fff','#fff','#fff','#fff'], 
              calculable : true,
              xAxis : [
                  {
                    type : 'category',
                    boundaryGap : false,
                      axisLabel: { //  如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
                      interval: 10, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
                      rotate: 0 // 横坐标上label的倾斜度
                      },
                    axisTick: {
                        show: false
                    },
                    data : this.one.data_x,
                    axisLabel:{
                                interval:this.one.interval,//每四个点显示一个标签
                              }
                  }
              ],
              yAxis: {
                        type: 'value',
                        min: 0, // y轴最小刻度值
                        max:Math.max.apply(null,this.one.data_y),
                        splitLine : {
                            lineStyle: {
                                color: ['#eee'],  // 设置网格线颜色
                                width: 1, // 设置网格线宽度
                                type: 'solid' // 设置网格虚线(dashed)、实线(solid)
                            },
                            show: true // 是否显示网格线
                        },
                        axisLine: {
                            lineStyle: {
                                // 设置y轴颜色
                                color: '#555666',
                                type: 'solid'
                            }
                        },
                    },
              
              series : [
                  {
                      name:'应收金额',
                      type:'line',
                      data:this.one.data_y,
                      itemStyle: {
                        normal: {
                          lineStyle: {
                            color: "#1890FF"
                          }
                        }
                      },
                      emphasis: {// 高亮
                          label: {
                              show: true,
                              textStyle: {
                                  color: '#333333',
                                  fontWeight: 'bold'
                              }
                          }
                      }
                  },
                  {
                      name:'应付金额',
                      type:'line',
                      data:this.two.data_y,
                      show:false,
                      itemStyle: {
                        normal: {
                          lineStyle: {
                            color: "#2FC25B",
                          }
                        }
                      },
                  },
                  {
                      name:'本金',
                      type:'line',
                      data:this.three.benjin,
                      itemStyle: {
                        normal: {
                          lineStyle: {
                            color: "rgba(0, 0, 0, 0)",
                          }
                        }
                      },
                  },
                  {
                      name:'利息',
                      type:'line',
                      data:this.three.money_rate,
                      itemStyle: {
                        normal: {
                          lineStyle: {
                            color: "rgba(0, 0, 0, 0)",
                          }
                        }
                      },
                  },
                  {
                      name:'滞纳金',
                      type:'line',
                      data:this.three.late_free,
                      itemStyle: {
                        normal: {
                          lineStyle: {
                            color: "rgba(0, 0, 0, 0)",
                          }
                        }
                      },
                  },
                  {
                      name:'毛利润',
                      type:'line',
                      data:this.three.profit,
                      itemStyle: {
                        normal: {
                          lineStyle: {
                            color: "rgba(0, 0, 0, 0)",
                          }
                        }
                      },
                  },
              ],
              grid:{
                     left:"7%"  ,
                     right:"5%"  
                }
          };
          // 使用刚指定的配置项和数据显示图表
          this.chartLine.resize();//直接加这句即可
          this.chartLine.setOption(option);
        },
        drawColumnar () {
                // 实例化echarts对象
              
              this.chartColumnar = echarts.init(document.getElementById('Columnar'),'shine');// 基于准备好的dom，初始化echarts实例
                // 绘制条形图
                var option = { 
                    // X轴
                    tooltip : {
                        trigger: 'axis'
                    },
                    calculable : true,
                    xAxis: {
                        show:false,
                        data: this.two.data_x
                    },
                    // Y轴
                    yAxis: {
                      show:false,
                    },
                    // 数据
                    series: [
                        {
                            // name: '衣服',
                            type: 'bar',
                            data: this.two.data_y,
                            itemStyle: {
                            normal: {
                              color: "#1890FF",
                              lineStyle: {
                                color: "#1890FF"
                              }
                            }
                          },
                        },
                       
                    ]
                };

                this.chartColumnar.setOption(option);
        },
        getRegionList() {
          getRegion(this.rankingdata).then(response => {
            this.city = response.data 
          })
        },
        handleClickAll(tab, event) {
          this.getMainDatas();
        }, 
      }
    }
</script>

<style  scope>
    input{width: 100px;border:none;text-align: center;color: #666;}
    .card_box{
        width:30%;background: #fff;border-radius: 8pt;margin-top:24pt;background-repeat: no-repeat;background-size: 100% 100%;
        height:7.5%;margin-top: 24pt;margin-left: 2%;float:left;color:#fff;position: relative;
    }
    .card_title{top:8.5%;left: 8.5%;font-size: 14px;position: absolute;}
    .all_count{top:30%;left: 8.5%;font-size: 14px;position: absolute;}
    .all_count_num{font-weight: 700;font-size: 38px;}
    .cardlists{width: 83%;height: 23.4%;top:76.5%;left:8.5%;position: absolute;
                border-top:1px solid #e8e8e8;line-height: 44pt;font-size: 14px;}
    .numm{font-weight: 600;}

    .rank{width: 90%;margin-left: 5%;
      /* border:1px solid red */
      }
    .gd{width: 50%;float: left;color:#555658;font-size: 14px;cursor: pointer;}
    .defualt{width: 50%;float: left;}
    .gdchoose1{color:#1890FF}
    .gd .el-tabs__nav-wrap::after { background-color:#fff !important;}

    .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input,
     .el-date-editor--timerange.el-input__inner{width:100% !important;}
     .el-radio-button__orig-radio:checked + .el-radio-button__inner{color:#1890FF;background-color: #fff;}
    .el-tabs--border-card{box-shadow:none;border:none;width: 348pt;height: 24pt;border:1px solid #eee}
    .el-tabs--border-card > .el-tabs__header{border-bottom: none;background-color:#fff}
    .el-tabs--border-card > .el-tabs__header .el-tabs__item{border:#DCDFE6 1px solid;width: 70pt;text-align: center;}
    /* .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active{border:#1890ff 1px solid;} */
    .el-range-editor--medium.el-input__inner{height: 30pt;margin-top: 1px;border-radius: 0;}

    .list_box{width: 90%;margin-left: 5%;height: 260pt;margin-top:40pt;overflow: auto;}
    .list_box::-webkit-scrollbar{width: 2pt;}
    .list_box::-webkit-scrollbar-thumb{width: 2pt;background: #D9EDFF;}
    .list_box::-webkit-scrollbar-button{display:none}
    .lis{width: 100%;height: 40pt;border:1px solid #fff;line-height: 40pt;font-size: 15px;color:#555658;border-bottom:1px solid #e8e8e8;}
    .num{
      width:20px;height:20px;background:#F0F2F5;
       margin-top: 13pt;
      line-height: 20px;;color:#555658;
      border-radius: 20px;text-align: center;}
    .firstt{background:#FFD13B;color:#fff;}
    .second{background:#ECECDB;color:#fff;}
    .third{background:#E6812F;color:#fff;}
    .main{width:100%;height:2100pt;background:#F0F2F5;padding-top:24pt;font-size: 12pt;color:#000;}
    .datetype{
      width: 100%;height: 32pt;
      margin-left: 2%;
    }
    .dated{
      width: 370pt;height: 100%;float: left;border:1px solid #eee
    }
    .dated .el-tabs__content{display:none;}
    .dated .el-tabs__nav-scroll{width: 370pt;}
    .grid-content{border: 1px solid #ccc;cursor: pointer;
          height: 32pt;line-height:32pt;text-align: center;}
    .pie-wrap{
        width:100%;
        height:350pt;
    }
    .title{color:#86888b;font-size: 15px;margin-left: 5%;}
    .title2{color:#1890FF;font-size: 15px;margin-left: 5%;}
    .allmoney{color:#242526;font-size: 18px;margin-left: 5%;margin-top: 8pt;font-weight: 800;}
    .one_line_box{
        width:46%;background: #fff;border-radius: 2pt;padding-top:20pt ;
        height:188pt;margin-top: 24pt;margin-left: 2%;float: left;
    }
    .two_line_box{
       width:94%;background: #fff;border-radius: 2pt;
        height:276pt;margin-top: 24pt;margin-left: 2%;float:none
    }
    .one_pie_box{
        width:46%;background: #fff;border-radius: 2pt;
        height:404pt;margin-top: 24pt;margin-left: 2%;float:left;padding-top:24pt;
    }
     .one_line,.line-columnar{
        width:100%;
        height:58pt;
    }
    .two_line{
       width:100%;
        height:100%;
    }
    .hr{width: 90%;margin-left: 5%;margin-top: 16pt;border:#e8e8e8 1px solid}
    .datas{width: 90%;margin-left: 5%;margin-top:20pt;}
    .datas2{width: 90%;margin-left: 5%;margin-top:16pt;line-height: 20px;}
    .labels{color:#86888b;font-size: 14px;}
    .jenos{color:#212121;font-size: 14px;font-weight:600 ;}
    .jenos2{color:#86888b;font-size: 14px;}
    .clear {clear: both;}
    
</style>